<template>
	<view class="mainCon">
		<view class="btnGroup" style="margin-top: 20rpx;">
			<u-button :custom-style="customStyle"  type="primary" @click="tapSelAll">全选</u-button>
		</view>
		<view class="empty" style="margin-top: 55rpx;" v-if="list.length === 0">
			<u-empty text="暂无相关数据" mode="list"></u-empty>
		</view>
		<view class="listCon">
			<view class="listItem" v-for="(item, index) in list" :key="index">
				<view class="infoCon" @click="selectitem(item)">
					<view class="checkBox">
						<u-checkbox v-model="item.checked"></u-checkbox>
					</view>
					<view>
						<view class="cellItem">
							<view class="label">
								集卡号：
							</view>
							<view class="value">
								{{item.carcode}}
							</view>
						</view>
						
						<view class="cellItem">
							<view class="label">
								流向：
							</view>
							<view class="value">
								{{item.endplace ? item.endplace : ''}}
							</view>
						</view>
							
						<view class="cellItem">
							<view class="label">
									车型：
							</view>
							<view class="value">
								{{item.brand}}
							</view>
						</view>
							
						<view class="cellItem">
							<view class="label">
								车架号：
							</view>
							<view class="value">
								{{item.carframeno}}
							</view>
						</view>
							
						<view class="cellItem">
							<view class="label">
								创建时间：
							</view>
							<view class="value">
								{{ $u.timeFormat(item.creatime, 'yyyy-mm-dd hh:MM:ss') }}
							</view>
						</view>													
					</view>
				</view>
				
			</view>	
			<view class="btnGroup" style="margin-top: 20rpx;">
				<u-button :custom-style="customStyle"  type="primary" @click="submit">确认预约进场</u-button>
			</view>
			<!-- <u-loadmore :status="status"  :icon-type="flower" :load-text="loadText"/> -->
		</view>
		<u-select mode="single-column" :list="roleNameOptions" v-model="carCodeShow" @confirm="carCodeConfirm"
			value-name="name" label-name="name"></u-select>
	</view>
</template>

<script>
import moment from 'moment';
import { data } from 'uview-ui/libs/mixin/mixin';
import loginVue from '../login/login.vue';
	export default {
		data() {
			return {
				customStyle: {
					height: '60rpx',
					width: '300rpx'
				},
				formData: {
					remark: '', //角色
					phonenumber: '',
					permit: '',
					rows: []
				},
				loadText: {
					loadmore: '',  //轻轻上拉
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				workwayShow: false,
				workwayList: [],
				carCodeShow: false,
				carCodeList: [],
				expressList: [],
				list: [],
				isCheckAll: false,
				expresShow: false,
				flag: false,
				roleNameOptions: [
					{ name: '船公司' },
					{ name: '船代' },
					{ name: '车队' },
					{ name: '司机' },
					{ name: '港口' },
					],
				pageNum: 1,
				pageSize: 20,
				total: 0,
				status: 'loadmore',
				portname: '',
				carcode: '',
				rules: {
					
				}
			};
		},
		onLoad(option) {
			this.carcode = option.carcode
			this.getList()
		},
		methods: {
			getList() {
				uni.showLoading({
					title: '加载中...'
				})
				uni.request({
					url: 'https://api.zlkj-port.com/DF-JG/xhtt/Q/PQQgheSKgq2kL2X?carcode=' + this.carcode,
					success: (res) => {
						this.isCheckAll = false
						res.data.rows.forEach((item) => {
							item.checked = false
						})
						this.list = res.data.rows
						this.total = res.data.total
						uni.hideLoading()
					}
				});
			},
			
			// },
			carCodeConfirm(e) {
				this.formData.remark = e[0].value
			},
			onSearch() {
				this.$refs.uForm.validate(valid => {
					if(valid) {
						this.getList()
					} else {
						uni.showToast({
							title: '请输入正确的手机号',
							icon: 'none'
						})
					}
				})
				
			},
			selectitem(item) {
				if (item.checked == false) {
					item.checked = true
				} else {
					item.checked = false
				}
			},
			tapSelAll() {
				if (this.isCheckAll) {
					this.list.forEach((item) => {
						item.checked = false
					})
					this.isCheckAll = false
				} else {
					this.isCheckAll = true
					this.list.forEach((item) => {
						item.checked = true
					})
				}
			},
			clearForm() {
				this.formData.remark = ''
				this.formData.phonenumber = ''
				this.formData.permit = ''
			},
			submit() {
				let listRes = []
				let listId = []
				listRes = this.list.filter(val => val.checked == true)
				listRes.forEach(val => {
					listId.push(val.id)
				})
				if(!listId) {
					uni.showToast({
						title: '未选择数据',
						icon: 'warning',
						duration: 2000
					})
					return
				}
				uni.request({
					url: 'https://api.zlkj-port.com/DF-JG/xhtt/U/wf9Ozdwz7AkkDbg?ids=' + listId.toString(),
					method: 'get',
					success: (res) => {
						uni.request({
							url: 'https://api.zlkj-port.com/DF-JG/xhtt/Q/PQQgheSKgq2kL2X?carcode=' + this.carcode,
							success: (res) => {
								this.isCheckAll = false
								res.data.rows.forEach((item) => {
									item.checked = false
								})
								this.list = res.data.rows
								this.total = res.data.total
								uni.showToast({
									title: '预约成功！',
									icon: 'success',
									duration: 2000
								})
							}
						})
						
					}
				})
				console.log(listId)
			},
			onSucess() {
				let checkList = []
				let checkListID = []
				this.list.forEach(item => {
					if(item.checked) {
						checkList.push(item.user_name)
						checkListID.push(item.portrole_id)
					}
				})
				
				if(checkList.length !== 0) {
					uni.showModal({
						title: '权限管理',
						content: '确定将权限给用户名称为' + checkList + '的用户吗',
						success: result => {
							if(result.confirm) {
								uni.request({
									url: 'https://api.zlkj-port.com/prod-api/wxuser/' + checkListID,
									// url: this.baseUrl + '/wxuser/' + checkListID,
									method: 'get',
									success: res => {
										uni.showToast({
											title: '提交成功'
										})
										setTimeout(() => {
											this.getList()
										}, 1500)
									}
								})
							}
						}
					})
				} else {
					uni.showToast({
						title: '请先选择数据！',
						icon: 'none'
					})
				}
			},
			deleteUser() {
				let checkList = []
				let checkListID = []
				this.list.forEach(item => {
					if(item.checked) {
						checkList.push(item.user_name)
						checkListID.push(item.userid)
					}
				})
				console.log(checkListID)
				if(checkList.length !== 0) {
					uni.showModal({
						title: '权限管理',
						content: '确定要删除用户名称为' + checkList + '的用户吗',
						success: result => {
							if(result.confirm) {
								uni.request({
									url: 'https://api.zlkj-port.com/prod-api/wxuser/' + checkListID,
									method: 'delete',
									success: res => {
										uni.showToast({
											title: '提交成功'
										})
										setTimeout(() => {
											this.getList()
										}, 1500)
									}
								})
							}
						}
					})
				} else {
					uni.showToast({
						title: '请先选择数据！',
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-form-item {
		padding: 6rpx !important;
	}

	page {
		background-color: #F2F1F9;
	}

	.headForm {
		padding: 20rpx;
		position: fixed;
		width: 100%;
		top: 0;
		z-index: 10;
		background-color: #FFFFFF;

		.btnGroup {
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin-top: 15rpx;
		}
		.pageLimit {
			.total {
				margin-top: 15rpx;
				font-size: 18px;
				font-weight: 550;
			}
		}
	}

	.listCon {

		.listItem {
			margin-left: 10px;
			padding: 20rpx;
			border-bottom: 1px solid $u-border-color;
			display: flex;
			align-items: center;



			.infoCon {

				display: flex;
				align-items: center;
				justify-content: space-between;

				.cellItem {
					display: flex;
					align-items: center;
					font-size: 28rpx;

					.label {}
				}

				.labelTag {
					background-color: #E0EDFB;
					color: #4C86E7;
					line-height: 50rpx;
					border-radius: 25rpx;
					font-size: 26rpx;
					text-align: center;
					padding-right: 15rpx;
					padding-left: 15rpx;
				}

				.labelTagpay {
					background-color: #85da96;
					color: #3757e7;
					line-height: 50rpx;
					border-radius: 25rpx;
					font-size: 26rpx;
					text-align: center;
					padding-right: 15rpx;
					padding-left: 15rpx;
				}

				.labelTagnopay {
					background-color: #ff7563;
					color: #ffffff;
					line-height: 50rpx;
					border-radius: 25rpx;
					font-size: 26rpx;
					text-align: center;
					padding-right: 15rpx;
					padding-left: 15rpx;
				}

				.checkBox {}
			}
		}
	}
</style>
